<!-- +----------------------------------------------------------------------
| 麦沃德科技赋能开发者，助力中小企业发展 
+----------------------------------------------------------------------
| Copyright (c) 2017～2024  www.wdadmin.cn    All rights reserved.
+----------------------------------------------------------------------
| 沃德代驾系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
+----------------------------------------------------------------------
| Author: MY WORLD Team <bd@maiwd.cn>   www.wdadmin.cn
+----------------------------------------------------------------------
| 组件-乘客支付二维码弹窗 开发者: 麦沃德科技-半夏
+---------------------------------------------------------------------- -->

<template>
	<view class="component-modal-payment-code" @click.stop>
		<uni-popup ref="popupModal" :is-mask-click="false" type="center" @change="onChange">
			<view class="popup-box">
				<view class="popup-header">
					<view class="title">{{showType == 1 ? "补差二维码" : "付款二维码"}}</view>
					<image class="close" src="/static/close.png" mode="aspectFit" @click="onClose"></image>
				</view>
				<view class="popup-content">
					<view class="content-code">
						<uqrcode ref="qrcode" canvas-id="qrcode" :value="codeData" :size="420" :loading="codeLoading" sizeUnit="rpx" v-if="codeData"></uqrcode>
					</view>
					<view class="content-text flex-column align-items-center">
						<text>请使用微信扫一扫</text>
						<text>扫描二维码支付</text>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		name: "componentModalPaymentCode",
		props: ["showType"],
		data() {
			return {
				// 订单id
				orderId: null,
				// 二维码数据
				codeData: "",
				// 二维码加载状态
				codeLoading: true,
				// 支付状态定时器
				paymentInterval: null,
			}
		},
		destroyed() {
			if (this.paymentInterval) clearInterval(this.paymentInterval)
		},
		methods: {
			// 打开模态框
			open(id, url) {
				this.codeLoading = true
				this.orderId = id
				if (this.showType == 1) {
					uni.showLoading({
						title: "加载中",
						mask: true,
					})
					this.getCodeData(() => {
						uni.hideLoading()
						this.$refs.popupModal.open()
					})
				} else {
					this.codeData = url
					this.createQrcode()
					this.$refs.popupModal.open()
					if (this.paymentInterval) clearInterval(this.paymentInterval)
					this.paymentInterval = setInterval(() => {
						this.getPaymentStatus(this.orderId)
					}, 1500);
				}
			},
			// 关闭弹窗
			onClose() {
				if (this.paymentInterval) clearInterval(this.paymentInterval)
				this.$refs.popupModal.close()
			},
			// 改变事件
			onChange(e) {
				if (!e.show) this.codeData = ""
				this.$emit("onChange", e.show)
			},
			// 获取二维码数据
			getCodeData(fn) {
				this.$util.request("driver.order.awaitingPaymentCode", {
					id: this.orderId,
				}).then(res => {
					if (fn) fn()
					if (res.code == 1) {
						this.codeData = res.data.code_url
						this.createQrcode()
						if (this.paymentInterval) clearInterval(this.paymentInterval)
						this.paymentInterval = setInterval(() => {
							this.getPaymentStatus(this.orderId)
						}, 1500);
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				}).catch(error => {
					if (fn) fn()
					console.error('获取二维码数据 ', error)
				})
			},
			// 生成二维码
			createQrcode() {
				if (this.$refs.qrcode && this.$refs.qrcode.toTempFilePath) {
					this.$refs.qrcode.toTempFilePath({
						success: () => {
							this.codeLoading = false
						},
						fail: () => {
							setTimeout(() => {
								this.createQrcode()
							}, 100);
						},
					});
				} else {
					setTimeout(() => {
						this.createQrcode()
					}, 100);
				}
			},
			// 获取支付状态
			getPaymentStatus() {
				var url = ""
				if (this.showType == 1) url = "driver.order.awaitingPaymentStatus"
				else url = "driver.order.createPaymentStatus"
				this.$util.request(url, {
					id: this.orderId,
				}).then(res => {
					if (res.code == 1) {
						if (res.data.payment_status == 1) {
							if (this.showType == 1) {
								uni.showToast({
									icon: "success",
									title: "乘客付款成功",
									duration: 2000
								})
								this.$emit("onUpdate")
							} else {
								this.$util.toPage({
									mode: 2,
									path: "/pages/driver/order/details?id=" + this.orderId,
									isToken: true,
								})
							}
							this.onClose()
						}
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				}).catch(error => {
					console.error('获取二维码数据 ', error)
				})
			},
		},
	}
</script>

<style lang="scss">
	.component-modal-payment-code {
		position: relative;
		z-index: 999;

		.popup-box {
			background: #FFF;
			border-radius: 32rpx;

			.popup-header {
				display: flex;
				align-items: center;
				padding: 48rpx 48rpx 0 96rpx;

				.title {
					color: #242629;
					text-align: center;
					font-size: 32rpx;
					font-weight: 600;
					line-height: 44rpx;
					flex: 1;
				}

				.close {
					width: 48rpx;
					height: 48rpx;
				}
			}

			.popup-content {
				padding: 56rpx 80rpx 48rpx;

				.content-code {
					width: 420rpx;
					height: 420rpx;
				}

				.content-text {
					margin-top: 56rpx;
					color: #0F1511;
					font-size: 28rpx;
					font-weight: 600;
					line-height: 40rpx;
					text-align: center;
				}
			}
		}
	}
</style>